<template>
	<div id="app">
		<el-container>
			<el-header>
				<img src="~@/assets/logo.png" class="he__logo" alt="" />
				<img src="~@/assets/dsjdap.png" class="he__logotext" alt="" />
			</el-header>
			<el-container class="con">
				<el-main>
					<div style="padding-bottom: 5px;background-color: #fff;">
						<el-button v-for='(item,index) in btnlist' :key="index"
							:style="{color:item.color,background:item.bgcolor}">{{item.text}}</el-button>
					</div>
					<div class="mian__box" :style="{height:`calc(100% - 20px - 30px)`}">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					value1: '2024-03-09'
				},
				radio1: '工序明细',
				btnlist: [{
					text: '屏幕A ',
					bgcolor: '#a4bbfa',
					color: '#231918'
				}, {
					text: '屏幕B',
					bgcolor: '#a4bbfa',
					color: '#231918'
				}, {
					text: '屏幕C',
					bgcolor: '#a4bbfa',
					color: '#231918'
				}, {
					text: '屏幕D',
					bgcolor: '#a4bbfa',
					color: '#231918'
				},],
				tableData: [
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
					{yi:1,gxm:'工资模板',gx:'已结账'},
				],
				curindex: '',
				mainTopheight: 0,
				lefttopheight: 0,

			}
		},
		mounted() {
			// let height = this.$refs.mian__top.offsetHeight; //100
			this.mainTopheight = this.$refs.mian__top.offsetHeight
			this.lefttopheight = this.$refs.leftTop.offsetHeight
			let _this = this
			window.onresize = function() {
				_this.mainTopheight = _this.$refs.mian__top.offsetHeight
				_this.lefttopheight = _this.$refs.leftTop.offsetHeight
				// console.log(_this.lefttopheight)
			};

		},

	}
</script>
<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.el-header {
		background-color: #fff;
		height: 111px !important;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #EFEFEF;
		padding-left: 43px;
		/* font-weight: normal; */
	}

	.he__logo {
		width: 64px;
		height: 53px;
		margin-right: 5px;
	}

	.he__logotext {
		width: 193px;
		height: 24px;
	}

	.el-aside {
		background-color: #fff;
		width: calc(27% - 43px) !important;
		border-right: 2px solid #EFEFEF;
		padding-left: 43px;
		padding-right: 0.8%;
	}

	.el-main {
		padding: 0 !important;
		background-color: #f1f4f6;
	}

	.con {
		height: calc(100vh - 111px);
		padding: 0 50px;
	}

	.dian {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		border: 3px solid #4A77F6;
		margin-right: 25px;
		justify-content: center;
		opacity: 0.39;
	}

	.el-submenu-title-1 {
		display: flex;
		align-items: center;
		font-size: 19px;
		padding-left: 20px;
	}

	.dian1 {
		width: 8px;
		height: 8px;
		background: #4E6781;
		border-radius: 4px;
		opacity: 0.5;
		margin-right: 5px;

	}

	.el-submenu .el-menu-item {
		font-size: 16px;
		padding-left: 90px !important;
	}

	.active {
		opacity: 1;
	}

	.lefttop {
		height: 61px;
		background: #4A77F6;
		display: flex;
		align-items: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 21px;
		color: #FFFFFF;


	}

	.lefttop__icon {
		width: 30px;
		height: 30px;
		margin-left: 44px;
		margin-right: 17px;
	}

	.cz {
		padding: 27px 40px 0;


	}

	.cz__item {
		display: flex;
		align-items: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 17px;
		color: #1E173C;
		line-height: 17px;
		margin-bottom: 25px;


	}

	.cz__item__label {

		width: 92px;
	}

	.el-button+.el-button {
		margin-left: 2px;
	}

	.mian__top {
		background-color: #fff;
		padding-bottom: 5px;
		display: flex;
		justify-content: space-between;
	}

	.mian__box {
		width: calc(100% - 30px);
		padding: 15px;
		padding-bottom: 0;
	}

	.home__top {
		display: flex;
		align-items: center;

	}

	.home__top__btn {
		cursor: pointer;
		text-align: center;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
		width: 20%;
		line-height: 50px;
	}

	.leftfooter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 0;
	}

	/deep/.el-input__inner {
		width: 135px;
		padding-left: 10px;
	}

	.el-input {
		width: fit-content;
		/* margin-right: 20px; */
		margin-bottom: 20px;
	}

	/deep/.el-input-group__prepend {
		padding: 0 10px;
	}

	/deep/.el-input__icon {
		width: 20px;
	}

	/deep/.el-input--suffix .el-input__inner {
		/* padding-right: 20px; */
	}

	/deep/.bz .el-input {
		width: 100%;
		display: flex;
		/* padding-left: 10px; */
	}

	/deep/.bz .el-input .el-input__inner {
		width: 100%;
	}

	/deep/.bz .el-input .el-input-group__prepend {
		width: fit-content;
		display: flex;
		align-items: center;
	}

	.footeritem {
		/* width: calc(100% - 18px - 18px); */
		width: 100%;
		background: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
	}

	.footeritem1 {

		background: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
	}

	/deep/.el-table__append-wrapper {
		overflow: visible;
		margin-top: 10px;
	}

	/deep/.el-table--scrollable-x .el-table__body-wrapper {
		overflow-y: auto;
	}
</style>